<template>
	<view class="card">
		<view class="card_img">
			<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/a9e9765a7c6f4879bfbbc2aeb9efeac3.png"
				mode="widthFix"></image>
		</view>
		<!-- 公司名称 -->
		<view class="company_name" :style="'top:'+tenantName_top+'px;'">{{userCard.tenant.tenantName}}</view>
		<!-- 头像 -->
		<view class="info_avarul" :style="'top:'+avarul_top+'px;'">
			<image :src="'data:image/png;base64,'+userCard.qrCode" mode="widthFix"></image>
		</view>
		<!-- 姓名 -->
		<view class="info_name">
			<view class="zwName">{{(userCard.userName==null?"未公开":userCard.userName)}}</view>
			<view class="ywjlName">{{userCard.jobTitle == null ?'未公开' : userCard.jobTitle}}</view>
		</view>
		<!-- 电话呢 -->
		<view class="info_phone" :style="'top:'+phone_top+'px;'" @tap="telFun" :data-tel="userCard.tel">
			<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/9b641d6d3a3d4883b2da616dc5beaf1a.png"
				mode="widthFix"></image>
			<view class="">{{(userCard.tel==null?"未公开":userCard.tel)}}</view>
		</view>
		<!-- 复制加微信 -->
		<view class="fuzhi_weixin" :style="'top:'+weixin_fz+'px;'" @click="copyPhoneNumber">
			<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/4b256fdac9dc4d139755bfddcb95be3a.png"
				mode="widthFix"></image>
			<view class="">添加微信</view>
		</view>
		<!-- 微信 -->
		<view class="info_weixin" :style="'top:'+weixin_top+'px;'">
			<button class="fx-item" type="default" size="mini" open-type="share" hover-class="none"
				@tap="popup_close_event">
				<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/d376ef7517f243c581076d9d55763ffd.png" mode="widthFix"></image>
				分享名片
			</button>
		</view>
		<!-- 地址 -->
		<view class="info_address" :style="'top:'+address_top+'px;'">
			<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/d7e93243ccbb4be0b25a9ce9ca1ca854.png"
				mode="widthFix"></image>
			<view class="address">{{(userCard.address==null?"未公开":userCard.address)}}</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				avarul_top: "", //二维码
				tenantName_top: "",
				weixin_top: "",
				weixin_fz: '',
				phone_top: "",
				address_top: "",
				userCard: {},
				userid: '',
				xzStyle: [true, false, false],
				imageUrl: [
					"https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/4579f7c204fd429f88a800ff8716ab70.png",
					"https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/a313b0643dfb456fbb48853069bf7bc3.png",
				],
				entryTime: 0,
				userId: ""
			}
		},
		onLoad(params) {
			if (typeof(params) != 'undefined') {
				var numberId = params.numberId || '';
				if (numberId != '') {
					uni.clearStorageSync();
					app.globalData.data.numberId = numberId;
				}
			}
			var userId = params['userId'];
			if (typeof(userId) != 'undefined') {
				this.userid = userId;
			}
			this.get_data();
			const demo = uni.getMenuButtonBoundingClientRect()
			this.avarul_top = demo.bottom + 20;
			this.tenantName_top = demo.bottom + 190;
			this.weixin_fz = demo.bottom + 240;
			this.weixin_top = demo.bottom + 280;
			this.phone_top = demo.bottom + 335;
			this.address_top = demo.bottom + 380;
		},
		onShow() {
			// 记录用户进来时间
			this.entryTime = Date.now();
		},
		onUnload() {
			this.OnEntryTime();
		},
		// 分享给朋友
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// console.log(res.target,"target");
			}
			return {
				title: app.globalData.data.tenantName,
				path: "pages/user_card/user_card?numberId=" + app.globalData.data.numberId + '&userId=' + this.userCard
					.userId,
				mpId: app.globalData.data.appid
			}
		},
		// 分享朋友圈
		// onShareTimeline(res) {
		// 	return{
		// 		title:app.globalData.data.tenantName,
		// 		type:0,
		// 		summary:""
		// 	}
		// },
		methods: {
			OnEntryTime() {
				var radarlog_data = {
					pageUrl: "pages/user_card/user_card",
					name: "用户名片页",
					remark: "用户名片页停留时间",
					entryTime: this.entryTime,
				}
				uni.request({
					url: app.globalData.get_request_url("radarlog/add"),
					data: radarlog_data,
					method: "POST",
					success: (res) => {
						console.log(res, "用户名片页停留时间");
					}
				})
			},
			// 复制手机号
			copyPhoneNumber() {
				uni.setClipboardData({
					data:this.userCard.tel,
					success: (res) => {
						uni.showToast({
							title:"复制成功",
							icon:'success'
						})
					},
					fail: () => {
						uni.showToast({
							title:"内容复制失败",
							icon:'error'
						})
					}
				})
			},
			// 弹层关闭
			popup_close_event(e) {
				// console.log(e, "11111111111");
			},
			// 跳转修改名片
			onModify() {
				uni.navigateTo({
					url: "/pages/card_modify/card_modify"
				})
			},
			// 拨打电话
			telFun(e) {
				var phone = e.currentTarget.dataset.tel || null;
				// if(tel!=null){
				// 	uni.makePhoneCall({
				// 		phoneNumber: tel, //电话号码
				// 		success: function(e) {
				// 			console.log(e);
				// 		},
				// 		fail: function(e) {
				// 			console.log(e);
				// 		}
				// 	})
				// }
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if (res.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: phone,
						success() {
							console.log('拨打成功了');
						},
						fail() {
							console.log('拨打失败了');
						}
					})
				} else {
					//安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [phone, '呼叫'],
						success: function(res) {
							if (res.tapIndex == 1) {
								uni.makePhoneCall({
									phoneNumber: phone,
								})
							}
						}
					})
				}
			},
			// 获取数据
			get_data() {
				var data = {
					scene: this.userid
				}
				var user = app.globalData.get_user_info(this, "get_data", "");

				if (user != false) {
					uni.request({
						url: app.globalData.get_request_url("card"),
						method: "POST",
						data: data,
						success: (res) => {
							this.userCard = res.data.data;
						}
					})
				}
			},
		}
	}
</script>
<style lang="less">
	.card {
		.card_img {
			position: relative;

			image {
				width: 90%;
				height: 1200rpx !important;
				display: block;
				margin: 40rpx auto;
				border-radius: 20px;
				box-shadow: h-shadow v-shadow blur spread color inset;
			}
		}

		// 公司名称
		.company_name {
			position: absolute;
			// top: 38%;
			left: 10%;
			color: #b37e32;
			font-size: 17px;
			font-weight: bold;
		}

		// 头像
		.info_avarul {
			position: absolute;
			// top: 15%;
			right: 15%;

			image {
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
		}

		// 名字
		.info_name {
			position: absolute;
			top: 23%;
			left: 12%;
			color: #b37e32;

			.ywName {
				font-size: 35px;
				font-family: '宋体';
			}

			.zwName {
				font-size: 20px;
				font-weight: bold;
				margin-top: 10rpx;
			}

			.ywjlName {
				font-size: 15px;
				margin-top: 10rpx;
			}
		}

		// 手机
		.info_phone {
			position: absolute;
			// top: 50%;
			left: 9%;
			display: flex;
			align-items: center;
			color: #b37e32;
			font-size: 14px;

			image {
				width: 55rpx;
				height: 55rpx !important;
				margin-right: 10rpx;
			}
		}

		// 复制微信
		.fuzhi_weixin {
			position: absolute;
			left: 10%;
			display: flex;
			align-items: center;
			color: #b37e32;
			font-size: 14px;

			image {
				width: 55rpx;
				height: 55rpx !important;
				margin-right: 10rpx;
			}
		}

		// 微信
		.info_weixin {
			position: absolute;
			// top: 45%;
			left: 7%;
			display: flex;
			align-items: center;
			color: #b37e32;
			font-size: 14px;

			button {
				// width: 260rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: left;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #b37e32;
				background-color: #f4f2e5;

				image {
					width: 55rpx;
					height: 55rpx !important;
					margin-right: 15rpx;
					margin-left: -20rpx;
				}
			}

			::after {
				border: none;
			}
		}

		.card_modify {
			position: absolute;
			// top: 63%;
			left: 58%;
			display: flex;
			align-items: center;
			color: #b37e32;
		}

		// 地址
		.info_address {
			position: absolute;
			// top: 57%;
			left: 9%;
			display: flex;
			align-items: center;
			color: #b37e32;
			font-size: 14px;

			.address {
				width: 230px;
			}

			image {
				width: 55rpx;
				height: 55rpx !important;
				margin-right: 10rpx;
			}
		}

		// 二维码
		.info_scan {
			position: absolute;
			// bottom: 10%;
			// right: 15%;
			bottom: 41%;
			left: 24%;

			image {
				width: 80px;
			}
		}
	}
</style>